.user-main {
    position: relative;
    background-color: #f3f3f3;
    display: flex; // 将 user-main 转换为 Flexbox 容器
    justify-content: flex-start; // 子元素从左开始对齐
    align-items: flex-start; // 子元素从顶部开始对齐
}

/*------------------最大的盒子，包含change-message，detail元素----------------*/
.user {
    display: flex;
}

/*------------------左侧的盒子，change-message----------------*/
.change-message {
    display: flex;
    flex-direction: column;
    //background-color: aqua;
    width: 250px;
    margin-right: 20px; // 添加右侧间距，使其他内容与 change-message 之间有间距
}

.change-message1 {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: 15px;
    margin: 5px auto;

    li {
        display: flex;
        justify-content: center;

        h3 {
            margin: 10px;
        }

        a {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 150px;
            height: 40px;
            border-radius: 5px;
            margin: 5px auto;
            cursor: pointer;

            &:hover {
                color: #3fb34f;
            }
        }
    }
}

.change-message2 {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: 15px;
    margin: 5px auto;

    li {
        display: flex;
        justify-content: center;

        h3 {
            margin: 10px;
        }

        a {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 150px;
            height: 40px;
            border-radius: 5px;
            margin: 5px auto;
            cursor: pointer;

            &:hover {
                color: #3fb34f;
            }
        }
    }
}

.change-message3 {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: 15px;
    margin: 5px auto;

    li {
        display: flex;
        justify-content: center;

        h3 {
            margin: 10px;
        }

        a {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 150px;
            height: 40px;
            border-radius: 5px;
            margin: 5px auto;
            cursor: pointer;

            &:hover {
                color: #3fb34f;
            }
        }
    }
}

.change-message4 {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: 15px;
    margin: 5px auto;

    li {
        display: flex;
        justify-content: center;

        h3 {
            margin: 10px;
        }

        a {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 150px;
            height: 40px;
            border-radius: 5px;
            margin: 5px auto;
            cursor: pointer;

            &:hover {
                color: #3fb34f;
            }
        }
    }
}


/*------------------右侧的盒子，detail-----------------*/
.detail {
    display: flex;
    flex-direction: column;
    width: 100%; // 使 detail 容器占据全部宽度
    //background-color: #ffb3b3;
}

.detail-mine {
    display: flex;
    justify-content: space-between; //两端对其《================================
    //flex-direction: column;换行《==============================
    padding: 15px;
    margin: 5px auto;
    background-color: #00a716a9;
    width: 100%;
    box-sizing: border-box; // 确保 padding 不影响宽度
    //height: 180px;不用再设置高度了《================================


    .profile {
        display: flex;
        align-items: center; //元素垂直居中《=========================

        img {
            width: 100px;
            height: 100px;
        }

        span {
            margin-left: 30px;
            color: #ffffff;
            font-size: 20px;
            /*加粗*/
            font-weight: bold;
        }
    }

    .vip {
        display: flex;
        justify-content: space-between;
        width: 450px;
        padding: 20px;


        span {
            display: flex;
            color: #ffffff;
            font-size: 40px;
            justify-content: center;
        }

        p {
            display: flex;
            color: #ffffff;
            font-size: 16px;
            justify-content: center;
        }
    }
}


/*-------------------------我的订单--------------------------*/
.detail-bill {
    display: flex;
    justify-content: space-between; //两端对其《================================
    //flex-direction: column;换行《==============================
    padding: 15px;
    margin: 5px auto;
    background-color: #ffffff;
    width: 100%;
    box-sizing: border-box; // 确保 padding 不影响宽度
    //height: 180px;不用再设置高度了《================================
    flex-direction: column;

    .bill0 {
        display: flex;
        justify-content: space-between;

        .right {
            margin-top: 10px;
        }
    }

    .bill1 {
        display: flex;
        justify-content: space-between;
        margin: 10px;
        border: 1px solid #f0f0f0;
        /* 添加外部边框线 */

        .part1 {
            display: flex;

            img {
                width: 230px;
                height: 230px;
            }
        }

        .part2 {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100%;

            .product {
                font-size: 18px;
                color: #2b2b2b;
            }

            .type {
                font-size: 14px;
                color: #a7a7a7;
            }
        }

        .part3 {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 15px;
            padding: 15px;
            box-sizing: border-box;
            font-size: 18px;
            color: #fd8d8d;
        }

        .part4 {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 15px;
            padding: 15px;
            box-sizing: border-box;
            border-left: 1px solid #e7e7e7;
            /* 左边框 */
            border-right: 1px solid #e7e7e7;
            /* 右边框 */
            border-top: none;
            /* 去掉上边框 */
            border-bottom: none;
            /* 去掉下边框 */

            .price {
                font-size: 18px;
                color: #ff0000;
            }
        }

        .part5 {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 10px;
            padding: 10px;
            box-sizing: border-box;

            .button {
                font-size: 18px;
                color: #ffffff;
                background-color: #3fb34f;
                margin: 10px;
                padding: 10px;
                box-sizing: border-box;
            }
        }
    }

    .bill2 {
        display: flex;
        justify-content: space-between;
        margin: 10px;
        border: 1px solid #f0f0f0;
        /* 添加外部边框线 */

        .part1 {
            display: flex;

            img {
                width: 230px;
                height: 230px;
            }
        }

        .part2 {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100%;

            .product {
                font-size: 18px;
                color: #2b2b2b;
            }

            .type {
                font-size: 14px;
                color: #a7a7a7;
            }
        }

        .part3 {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 15px;
            padding: 15px;
            box-sizing: border-box;
            font-size: 18px;
            color: #a7a7a7;

            .status {
                color: #fd8d8d;
            }
        }

        .part4 {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 15px;
            padding: 15px;
            box-sizing: border-box;
            border-left: 1px solid #e7e7e7;
            /* 左边框 */
            border-right: 1px solid #e7e7e7;
            /* 右边框 */
            border-top: none;
            /* 去掉上边框 */
            border-bottom: none;
            /* 去掉下边框 */

            .price {
                font-size: 18px;
                color: #ff0000;
            }
        }

        .part5 {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 10px;
            padding: 10px;
            box-sizing: border-box;

            .button {
                font-size: 18px;
                color: #ffffff;
                background-color: #3fb34f;
                margin: 10px;
                padding: 10px;
                box-sizing: border-box;
            }
        }
    }

}


/*---------------------我的收藏------------------------*/
.detail-collection {
    display: flex;
    justify-content: space-between; //两端对其《================================
    //flex-direction: column;换行《==============================
    padding: 15px;
    margin: 5px auto;
    background-color: #ffffff;
    width: 100%;
    box-sizing: border-box; // 确保 padding 不影响宽度
    //height: 180px;不用再设置高度了《================================
    flex-direction: column;

    .collection0 {
        display: flex;
        justify-content: space-between;

        .right {
            margin-top: 10px;
        }
    }

    .collection1 {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: center;
        width: 992px;
        height: 500px;

        li {
            position: relative;
            width: 242px;
            height: 380px;
            border: 2px solid #fff;
            /* 超出部分隐藏 */
            overflow: hidden;

            .img-box {
                width: 184px;
                height: 184px;
                margin: 0 auto;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .info {
                padding: 0 30px 13px 30px;

                h3 {
                    font-size: 20px;
                    font-weight: 400;
                }

                .type {
                    font-size: 16px;
                }

                .price {
                    font-size: 22px;
                    color: rgb(216, 71, 71);
                }
            }
        }
    }
}


/*-----------------------我的足迹------------------------*/
.detail-history {
    display: flex;
    justify-content: space-between; //两端对其《================================
    //flex-direction: column;换行《==============================
    padding: 15px;
    margin: 5px auto;
    background-color: #ffffff;
    width: 100%;
    box-sizing: border-box; // 确保 padding 不影响宽度
    //height: 180px;不用再设置高度了《================================
    flex-direction: column;

    .history0 {
        display: flex;
        justify-content: space-between;

        .right {
            margin-top: 10px;
        }
    }

    .history1 {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: center;
        width: 992px;
        height: 500px;

        li {
            position: relative;
            width: 242px;
            height: 380px;
            border: 2px solid #fff;
            /* 超出部分隐藏 */
            overflow: hidden;

            .img-box {
                width: 184px;
                height: 184px;
                margin: 0 auto;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .info {
                padding: 0 30px 13px 30px;

                h3 {
                    font-size: 20px;
                    font-weight: 400;
                }

                .type {
                    font-size: 16px;
                }

                .price {
                    font-size: 22px;
                    color: rgb(216, 71, 71);
                }
            }
        }
    }
}